<template>
  <div class="human-config-panel">
    <div class="panel-title">人员配置</div>
    <el-form label-position="left" label-width="80px" size="small">
      <el-form-item label="人员样式">
        <el-select v-model="properties.mode" class="full-width">
          <el-option
            v-for="item in humanStyleOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="动画模式">
        <el-select v-model="properties.animation" class="full-width">
          <el-option
            v-for="item in animationModeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="button-create">
      <el-button type="primary" @click="createEShuman">开始创建</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getobjm } from '@/utils/getobjm.js'
import { ESHuman } from 'earthsdk3'
import { useTreeStore } from '@/stores/treeStore.js'
import { usePlottingStore } from '@/stores/plottingStore.js'
const plottingStore = usePlottingStore()
const treeStore = useTreeStore()
const objm = getobjm()
// 人员配置属性
const properties = ref({
  mode: 'worker',
  animation: 'running',
})

// 人员样式选项
const humanStyleOptions = [
  { id: '1', value: 'worker', label: '工人' },
  { id: '2', value: 'police', label: '警察' },
  { id: '3', value: 'pedestrian', label: '路人' },
  { id: '4', value: 'stranger', label: '陌生人' },
  { id: '5', value: 'suitMan', label: '男士' },
  { id: '6', value: 'suitWoman', label: '女士' },
]

// 动画模式选项
const animationModeOptions = [
  { id: '1', value: 'standing', label: '站立' },
  { id: '2', value: 'walking', label: '行走' },
  { id: '3', value: 'running', label: '奔跑' },
]
// 定义emit，用于通知父组件关闭配置面板
const emit = defineEmits(['close-panel'])
const createEShuman = () => {
  const sceneObjectESHuman = objm.createSceneObject(ESHuman)
  if (!sceneObjectESHuman) return
  sceneObjectESHuman.mode = properties.value.mode
  sceneObjectESHuman.animation = properties.value.animation
  sceneObjectESHuman.editing = true
  sceneObjectESHuman.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESHuman && sceneObjectESHuman.editing === false) {
      const position = sceneObjectESHuman.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESHuman.json
      objm.destroySceneObject(sceneObjectESHuman)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          plottingStore.createPlottingData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })
  emit('close-panel') //关闭配置面板
}
</script>

<style lang="scss" scoped>
.human-config-panel {
  width: 280px;
  color: #ffffff;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  border: 1px solid rgba(0, 195, 255, 0.6);
  padding: 8px;
}

.panel-title {
  font-size: 14px;
  color: #00c3ff;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 195, 255, 0.3);
}

:deep(.el-form-item__label) {
  color: #ffffff;
  font-size: 12px;
}

.full-width {
  width: 100%;
}

:deep(.el-input__wrapper),
:deep(.el-input-number__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(60, 60, 70, 0.8);
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #ffffff;
  height: 28px;
}

:deep(.el-select-dropdown) {
  background-color: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(60, 60, 70, 0.8);
}

:deep(.el-select-dropdown__item) {
  color: #ffffff;
}

:deep(.el-select-dropdown__item.selected) {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.2);
}

:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

.button-create {
  margin-top: 15px;
  :deep(.el-button) {
    width: 100%;
    background-color: rgba(0, 195, 255, 0.2);
    border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
    color: #00c3ff;
    border-radius: 0.2083vw /* 4px -> .2083vw */;
    font-size: 0.625vw /* 12px -> .625vw */;
    height: 1.6667vw /* 32px -> 1.6667vw */;
    line-height: 1.6667vw /* 32px -> 1.6667vw */;
    margin: 0;
    &:hover {
      background-color: rgba(0, 195, 255, 0.4);
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 12px;
}

:deep(.el-slider) {
  --el-slider-main-bg-color: #409eff;
  --el-slider-runway-bg-color: rgba(64, 158, 255, 0.2);
  --el-slider-stop-bg-color: #ffffff;
  --el-slider-height: 6px;
}

:deep(.el-slider__button) {
  border: 2px solid #409eff;
  background-color: #ffffff;
}

:deep(.el-slider__runway) {
  height: 6px;
}

:deep(.el-slider__bar) {
  height: 6px;
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: rgba(30, 30, 40, 0.8);
  color: #ffffff;
  border-color: rgba(60, 60, 70, 0.8);
}

:deep(.el-tooltip__trigger) {
  color: #ffffff;
}
</style>
